<template>
	<view class="page">
		<!-- header 开始 -->
		<view class="header">
		<!-- left location 开始-->
		<view class="location">
			<uni-icons type="location-filled" size="30" color="red"></uni-icons>
			<text>石家庄</text>
		</view>
		<!-- left location 结束-->
		<!-- right search 开始 -->
		<view class="uni-search-box">
			<uni-search-bar placeholder="请输入关键字进行查找" bg-color="#ffaaff" cancel-button="none" radius="50"/>
		</view>
		<!-- right seach 结束 -->
		</view>
		<!-- header 结束 -->
    <!-- 首页轮播图开始 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item, index) in data" :key="item._id">
							<view class="swiper-item">
								<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
  	<!-- 首页轮播图结束 -->
  </view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
			
		}
	}
	</script>
	
	<style scoped>
		...
		.uni-margin-wrap{
			margin-top: 5rpx;
		}
		.swiper{
			height: 315rpx;
		}
		.banner-image {
			width: 750rpx;
			height: 315rpx;
		}
		
	</style>